import { StyledMediaContainer } from '@/style/global'
import styled from 'styled-components'

export const StyledWrap = styled(StyledMediaContainer)`
	font-size: 12px;
	color: #313131;
	* {
		box-sizing: border-box;
	}
	.top-wrap {
		display: flex;
		height: 58px;
		align-items: baseline;
		justify-content: space-between;
		.tab {
			margin-top: 14px;
			.kd-tab-list {
				flex-wrap: wrap;
				& > div {
					margin-bottom: 2px;
				}
			}
		}
		.options {
			margin-top: 14px;
			flex-shrink: 0;
			.save-as-template {
				margin-right: 50px;
			}
		}
	}
	.main-content {
		display: flex;
		.left-panel,
		.right-panel {
			border-bottom: 2px solid #949799;
			height: calc(100vh - 101px - 140px);
			min-height: 539px;
			overflow: auto;
		}
		.left-panel {
			flex: 1;
		}
		.right-panel {
			margin-left: 40px;
			overflow-y: hidden;
		}
	}
`
